<template>
  <div>
    <el-menu
      default-active="1-4-1"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
    >
      <template v-for="item in list">
        <template v-if="item.child && item.child.length > 0">
          <el-submenu
            :index="item.self.index"
            :key="item.id"
            @click="gotoPath(item)"
          >
            <template slot="title" >
              <!-- <i :class="item.self.icon"></i> -->
              <iconpark-icon :name="item.self.icon"></iconpark-icon>
              <span>&nbsp;&nbsp;{{ item.self.title }}</span>
            </template>
            <LeftMenu :list="item.child" />
          </el-submenu>
        </template>
        <template v-if="item.child.length == 0"
        >
              <el-menu-item
              :key="item.id"
              :index="item.self.index"
              @click="gotoPath(item)"
              :class="item.self.to == $route.fullPath ? 'checked':''"
            >
              <iconpark-icon :name="item.self.icon"></iconpark-icon>
              <span slot="title" >&nbsp;&nbsp;{{ item.self.title }}</span>
            </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import { nextTick } from 'vue';
export default {
  name: "LeftMenu",
  data() {
    return {
      isCollapse: true,
      route:''
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    gotoPath(item) {
      console.log(item.self.to);
      this.$router.push(item.self.to)
    },
  },
  props: {
		isCollapse:Boolean,
    list: {
      type: Array,
      require: true,
    },
  },
  mounted(){
    
  }
};
</script>

<style scoped>
::-webkit-scrollbar{
  display: none;
}
.el-submenu .el-menu-item{
  margin-left: 30px;
  padding: 0;
}
.checked,.el-menu-item:focus, .el-menu-item:hover{
  background-color: rgb(11, 94, 94);
  color: aquamarine;
}
/* .el-menu-item.is-active{
  background-color: aqua;
  color: aquamarine;
} */
</style>